<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper-bundle.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <link rel="stylesheet" href="./css/sass1.css">
  <link rel="stylesheet" href="./css/scss.css">
  <!-- Demo styles -->
  <style>
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
      height: 2000px;
    }

    .swiper-container {
      width: 100%;
      height: 745;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      overflow: hidden;
    }

    .slide-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-size: cover;
      background-position: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      color: #fff;
    }

    .cl1 {
      float: left;
    }

    .cl2 {
      width: 600px;
      height: 500px;
      float: right;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden"
    style="overflow: hidden;">
    <div id="_next">
      <div class="header-wrapper zh">
        <div class="jsx-3738640256 header zh">
          <a href="https://www.bytedance.com/zh/" class="logo">
            <img
              src=""
              alt="">
          </a>
          <div class="jsx-3738640256 right">
            <div class="jsx-40033694220 nav-item">关于我们</div>
            <div class="jsx-40033694220 nav-item">我们的产品</div>
            <div class="jsx-40033694220 nav-item">新闻动态</div>
            <div class="jsx-40033694220 nav-item">企业社会责任</div>
            <div class="jsx-40033694220 nav-item">加入我们</div>
          </div>
        </div>
      </div>

    </div>





    <div class="swiper-wrapper" id="swiper-wrapper-38be61b8acc88753" aria-live="polite"
      style="cursor: grab; transition-duration: 0ms; transform: translate3d(-3072px, 0px, 0px);">
      <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5" role="group">
        <div class="slide-inner"
          style="background-image: url(&quot;https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png&quot;); transform: translate3d(1536px, 0px, 0px); transition: all 0ms ease 0s;">
        </div>
      </div>
      <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="0" role="group"
        style="width: 1536px; transition: all 0ms ease 0s;">
        <div class="slide-inner"
          style="background-image: url(&quot;https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/0-390b5def140dc370854c98b8e82ad394.png&quot;); transform: translate3d(768px, 0px, 0px); transition: all 0ms ease 0s;">
        </div>
      </div>
      <div class="swiper-slide swiper-slide-visible swiper-slide-active" data-swiper-slide-index="1" role="group"
        style="width: 1536px; transition: all 0ms ease 0s;">
        <div class="slide-inner"
          style="background-image: url(&quot;https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/1-b4afd269ffb0ba19bd1dd33e3ed5cec3.png&quot;); transform: translate3d(0px, 0px, 0px); transition: all 0ms ease 0s;">
        </div>
      </div>
      <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group"
        style="width: 1536px; transition: all 0ms ease 0s;">
        <div class="slide-inner"
          style="background-image: url(&quot;https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/2-468bb0555d827d48bce4e178f085bf90.png&quot;); transform: translate3d(-768px, 0px, 0px); transition: all 0ms ease 0s;">
        </div>
      </div>
      <div class="swiper-slide" data-swiper-slide-index="3" role="group"
        style="width: 1536px; transition: all 0ms ease 0s;">
        <div class="slide-inner"
          style="background-image: url(&quot;https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/3-9ea22bd593086f432ab75ee6c95c37de.png&quot;); transform: translate3d(-1536px, 0px, 0px); transition: all 0ms ease 0s;">
        </div>

      </div>

    </div>
  </div>


  <div>
    <div>
      <h1>企业文化</h1>
      <div class="cl1">字节范是字节跳动企业文化的重要组成部分，是我们共同认为准则</div>
    </div>






    <div class="cl2">












      <html lang="en">

      <head>
        <meta charset="utf-8">
        <title>Swiper demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="./swiper-bundle.css">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
















        <!-- Demo styles -->
        <style>
          html,
          body {
            position: relative;
            height: 100%;
          }

          body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
          }

          .swiper {
            width: 100%;
            height: 100%;
          }

          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
          }

          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }


          .swiper {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
          }

          .swiper-slide {
            background-size: cover;
            background-position: center;
          }

          .mySwiper2 {
            height: 100%;
            width: 100%;
          }

          .mySwiper {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
          }

          .mySwiper .swiper-slide {
            width: 25%;
            height: 50%;
            opacity: 0.4;
          }

          .mySwiper .swiper-slide-thumb-active {
            opacity: 1;
          }

          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        </style>
      </head>

      <body>
        <!-- Swiper -->

        <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
          class="swiper mySwiper2 swiper-initialized swiper-horizontal swiper-pointer-events">
          <div class="swiper-wrapper" id="swiper-wrapper-99fba15f3a1f1ed9" aria-live="polite"
            style="transition-duration: 0ms; transform: translate3d(-1546px, 0px, 0px);">
            <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group" aria-label="1 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-5-ae0af3f048628a4a6703d58084a28014.jpg">
            </div>
            <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" role="group" aria-label="2 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-0-1523846a065bd70e69a6462eeabb59d3.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="2" role="group" aria-label="3 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-1-de7f5f4876bc1fda19028283676573b1.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="3" role="group" aria-label="4 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-2-912fee913a62b12222a4604b5da5010a.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="5 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-3-5dbfa39699d9bbf71d42a40186595419.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="6 / 10"
              style="width: 1536px; margin-right: 10px;">
              <img
                src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/zh-4-26c4957719a3e65eb6054907f14fde98.jpg">
            </div>


            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="0"
              role="group" aria-label="1 / 10" style="width: 1536px; margin-right: 10px;">
              <img src="./images/nature-1.jpg">
            </div>
          </div>
          <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
            aria-controls="swiper-wrapper-99fba15f3a1f1ed9"></div>
          <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
            aria-controls="swiper-wrapper-99fba15f3a1f1ed9"></div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
        <div thumbsslider=""
          class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-free-mode swiper-thumbs">
          <div class="swiper-wrapper" id="swiper-wrapper-bc9edc7a2e98b862" aria-live="polite"
            style="transition-duration: 0ms; transform: translate3d(-1546px, 0px, 0px);">
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="6" role="group"
              aria-label="7 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-7.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="7" role="group"
              aria-label="8 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-8.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="8" role="group"
              aria-label="9 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-9.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="9" role="group"
              aria-label="10 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-10.jpg">
            </div>
            <div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active"
              data-swiper-slide-index="0" role="group" aria-label="1 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-1.jpg">
            </div>

            <div class="swiper-slide swiper-slide-visible swiper-slide-next" data-swiper-slide-index="1" role="group"
              aria-label="2 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-2.jpg">
            </div>
            <div class="swiper-slide swiper-slide-visible" data-swiper-slide-index="2" role="group" aria-label="3 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-3.jpg">
            </div>
            <div class="swiper-slide swiper-slide-visible" data-swiper-slide-index="3" role="group" aria-label="4 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-4.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="5 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-5.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="6 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-6.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="6" role="group" aria-label="7 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-7.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="7" role="group" aria-label="8 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-8.jpg">
            </div>
            <div class="swiper-slide" data-swiper-slide-index="8" role="group" aria-label="9 / 10"
              style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-9.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="9" role="group"
              aria-label="10 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-10.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active swiper-slide-thumb-active"
              data-swiper-slide-index="0" role="group" aria-label="1 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-1.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="1"
              role="group" aria-label="2 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-2.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" role="group"
              aria-label="3 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-3.jpg">
            </div>
            <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" role="group"
              aria-label="4 / 10" style="width: 376.5px; margin-right: 10px;">
              <img src="./images/nature-4.jpg">
            </div>
          </div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>










        <!-- Swiper JS -->
        <script src="./swiper-bundle.js"></script>

        <!-- Initialize Swiper -->
        <script>
          var swiper = new Swiper(".mySwiper", {
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
          });
          var swiper2 = new Swiper(".mySwiper2", {
            loop: true,
            spaceBetween: 10,
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            thumbs: {
              swiper: swiper,
            },

          });
        </script>


      </body>

      </html>




















    </div>





    <div class="Content2">

      <div> <img src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/cod-812b8e96a232cda309a0786e4f2356e3.jpeg" alt="" width="400px"
        height="300px"></div>
      <div>
          <h1>行为准则</h1>
          <p>
              字节跳动相信，在企业发展过程中，高 <br>
              道德标准和诚信文化发挥着关键作用。<br>
              因此，我们制定了字节跳动行为准则和<br>
              字节跳动合作伙伴行为准则。<br>
              了解更多>
          </p>
      </div>
  </div>

  <h1 class="mark">大事记</h1>
  <div class="Content3">
      <div><img src="https://lf1-cdn-tos.bytescm.com/obj/static/ies/bytedance_official/_next/static/images/28-fd55985411e2a369cd652a2931791497.png" alt="" width="300" height="300"></div>
  </div>

  <h1 class="mark">联系我们</h1>

  <div class="Content4">
      <div class="The">
          <h4>媒体问询</h4>
          <p>gongguan@bytedance.com</p>
      </div>
      <div class="The">
          <h4>招聘相关</h4>
          <p>gongguan@bytedance.com</p>
      </div>
  </div>

  <div class="Content4">
      <div class="The">
          <h4>商务合作</h4>
          <p>gongguan@bytedance.com</p>
      </div>
      <div class="The">
          <h4>广告合作</h4>
          <p>gongguan@bytedance.com</p>
      </div>
  </div>

  <div class="Content4">
      <div class="The">
          <h4>廉洁举报</h4>
          <p>gongguan@bytedance.com</p>
      </div>
  </div>


  <div class="end">
      <div class="end-content">
          <img src="" alt="">
      </div>

      <div class="end-content">
          <ul>
              <li>关于我们</li>
              <li>企业文化</li>
              <li>行为准则</li>
              <li>大事记</li>
              <li>我们的产品</li>
              <li>联系我们</li>
          </ul>
      </div>

      <div class="end-content">
          <ul>
              <li>新闻动态</li>
              <li>公司新闻</li>
              <li>数据报告</li>
          </ul>
      </div>


      <div class="end-content">
          <ul>
              <li>企业社会责任</li>
              <li>企业社会责任报告</li>
              <li>优质内容创造社会价值</li>
              <li>信息助力公益新思路</li>
              <li>可持续发展的经营与管理</li>
              <li>维护健康的网络生态平台</li>
          </ul>
      </div>

      <div class="end-content">
          <ul>
              <li>加入我们</li>
              <li>招聘官网</li>
          </ul>
      </div>
  </div>

  <div class="end-Tail">
      <img src="" alt="" class="content-Tail" width="200" height="60">
      <p class="content-Tail1">C 2012- 2021字节跳动<br>京公网安备11000002002068号京ICP备12025439号-7</p>
  </div>




  </div>
</body>
<!-- Swiper JS -->
<script src="./swiper-bundle.js"></script>
<!-- Initialize Swiper -->
<script>
  var interleaveOffset = 0.5; //视差比值

  var swiperOptions = {
    loop: true,
    speed: 1000,
    grabCursor: true,
    watchSlidesProgress: true,
    mousewheelControl: true,
    keyboardControl: true,
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev"
    // },
    on: {
      progress: function (swiper) {
        for (var i = 0; i < swiper.slides.length; i++) {
          var slideProgress = swiper.slides[i].progress;
          var innerOffset = swiper.width * interleaveOffset;
          var innerTranslate = slideProgress * innerOffset;
          swiper.slides[i].querySelector(".slide-inner").style.transform =
            "translate3d(" + innerTranslate + "px, 0, 0)";
        }
      },
      touchStart: function (swiper) {
        for (var i = 0; i < swiper.slides.length; i++) {
          swiper.slides[i].style.transition = "";
        }
      },
      setTransition: function (swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++) {
          swiper.slides[i].style.transition = speed + "ms";
          swiper.slides[i].querySelector(".slide-inner").style.transition =
            speed + "ms";
        }
      }
    }
  };

  var swiper = new Swiper(".swiper-container", swiperOptions, {
    autoplay: {
      delay: 1000, //1秒切换一次
      disableOnInteraction: false,
    },
  });





  document.getElementById("navigationul").addEventListener("mouseover", Across);

    function Across(event) {
        if (event.target.nodeName == 'LI') {
            if (event.target.id == 0) {
                $('li').eq(0).css('color', 'rgb(89,225,220)')
            } else if (event.target.id == 1) {
                $('li').eq(1).css('color', 'rgb(89,225,220)')
            } else if (event.target.id == 2) {
                $('li').eq(2).css('color', 'rgb(89,225,220)')
            } else if (event.target.id == 3) {
                $('li').eq(3).css('color', 'rgb(89,225,220)')
            } else if (event.target.id == 4) {
                $('li').eq(4).css('color', 'rgb(89,225,220)')
            }
        }
    }

    document.getElementById("navigationul").addEventListener("mouseout", leave);

    function leave(event) {
        if (event.target.nodeName == 'LI') {
            $('li').css('color', '')
        }
    }


    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 1000,
        },
    });

    var cc = new Swiper(".cc", {
        slidesPerView: 1,
        grid: {
            rows: 2,
        },
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>


</html>